<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/zjtgslfx.png" alt="">
      </div>
      <h2>发电情况</h2>
    </div>
    <div class="monitor_cont">
      <div class="monitor_btn">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="本月" name="day"></el-tab-pane>
          <el-tab-pane label="今年" name="month"></el-tab-pane>
          <el-tab-pane label="近五年" name="year"></el-tab-pane>
        </el-tabs>
      </div>
      <div class="monitor_echarts">
        <div id="monitor_main"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/assets/utils/api.js'
export default {
  data() {
    return {
      arr: [],
      activeName: 'day',
      myChart: {},
      tenantid: 1128
    }
  },
  created() {
    // this.initChart()
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await api.getPowerGeneration({ tenantid: this.tenantid, type: this.activeName })
      this.initChart(res.data)
    },
    handleClick() {
      this.getData()
    },
    // 图表初始化
    initChart(data) {
      this.myChart = this.$echarts.init(document.getElementById('monitor_main'))
      // 公用电量
      const arr = data.ongrid_power
      // 自用电量
      const arr2 = data.use_power
      let date = []
      data.xdates.forEach(item => {
        if(this.activeName == 'year'){
          date.push(item.substring(0, item.length - 15))
        }else if(this.activeName == 'month'){
          date.push(item.substring(5, item.length - 12))
        }
        else{
          date.push(item.substring(6, item.length - 9))
        }
      })
      const maxNum = Math.max.apply(null, [...arr, ...arr2]) * 2
      let maxArr = []
      for (let i = 0; i < arr.length; i++) {
        maxArr.push(maxNum)
      }
      this.myChart.setOption(
        {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'line'
            },
            extraCssText: 'background: #023881;border:none;color:#fff;opacity: 0.9',
            formatter(params) {
              return `
              日期：<span style="color: #50D5FD">${params[0].axisValue}</span> <br/>
              公用电量：<span style="color: #50D5FD">${params[0].data}</span> <br/>
              自用电量：<span style="color: #50D5FD">${params[1].data}</span> <br/>
            `
            }
          },
          xAxis: {
            type: 'category',
            data: date,
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#50D5FD',
                padding: [0, 0, 0, -10]
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            splitNumber: 6,
            axisLine: {
              show: true,
              lineStyle: {
                color: '#5fa1ff'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#50D5FD'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#427fd5'
              }
            },
            axisTick: {
              show: true,
              inside: true,
              length: 3
            }
          },
          grid: {
            // right: '25%',
            // top: '23%',
            bottom: '25%',
            left: '12%',
            // x: "12%",//x 偏移量
            // y: "7%", // y 偏移量
            width: '82%', // 宽度
            height: '60%'
          },
          legend: {
            data: ['自用电量', '公用电量'],
            top: '5%',
            itemHeight: 8,
            itemWidth: 12,
            textStyle: {
              color: [],
              fontSize: '0.1rem'
            }
          },
          dataZoom: [
            {
              type: 'slider',
              // show: true,
              height: 15,
              bottom: 10,
              // fillerColor: '#409EFF',
              // borderColor: 'transparent',
              // backgroundColor: '#7e94bb',
              // // 拖拽手柄样式 svg 路径
              // handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
              // handleColor: '#50d5fd',
              // handleSize: 10,
              start: 20,
              end: 80,
              textStyle: {
                color: '#50fde7'
              }
            }
          ],
          series: [
            {
              name: '公用电量',
              data: arr,
              type: 'bar',
              stack: 'merge',
              emphasis: {
                focus: 'series'
              },
              barWidth: 10,
              zlevel: 4,
              itemStyle: {
                normal: {
                  //柱形图圆角，初始化效果
                  barBorderRadius: [0, 0, 100, 100],
                  color: '#3198F7',
                }
              },
            },
            {
              name: '自用电量',
              data: arr2,
              type: 'bar',
              stack: 'merge',
              emphasis: {
                focus: 'series'
              },
              barWidth: 10,
              zlevel: 4,
              itemStyle: {
                normal: {
                  //柱形图圆角，初始化效果
                  barBorderRadius: [100, 100, 0, 0],
                  // 设置颜色渐变
                  color: new this.$echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      { offset: 0, color: '#10D79C' },
                      { offset: 0.5, color: '#10D79C' },
                      { offset: 1, color: '#7AE0C2' },
                    ]
                  ),
                }
              },
            },
            {
              data: maxArr,
              type: 'bar',
              barWidth: 30,
              barGap: '-200%',
              zlevel: 3,
              itemStyle: {
                normal: {
                  // 设置颜色渐变
                  color: 'rgba(49, 100, 158, 0.6)'
                  // color: 'rgba(21, 58, 94, 0.2)'
                }
              },
            }
          ]
        }
      )
      window.addEventListener('resize', () => {
        this.myChart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.monitor_cont {
  width: 100%;
  height: 2.9rem;
  display: flex;
  flex-direction: column;

  .monitor_btn {
    width: 100%;
    height: 28%;
  }

  .monitor_echarts {
    width: 100%;
    height: 68%;

    #monitor_main {
      width: 100%;
      height: 100%;
    }
  }


  .monitor_btn {
    display: flex;
    justify-content: center;
  }
}
</style>
